<template>
  <div class="box-yuyi">
    <div class="box-left" v-loading="treeLoading">
      <el-tree
        ref="categoryTree"
        :data="treeData"
        node-key="id"
        :props="propsTree"
        default-expand-all
        :expand-on-click-node="false"
        @node-click="handleNodeClick">
          <span class="el-tree-node__label" slot-scope="{ node }">
            <span>
              <i class="el-icon-folder close"></i>
              <i class="el-icon-folder-opened open"></i>
              {{ node.label }}
            </span>
          </span>
      </el-tree>
    </div>
    <div class="box-content">
      <el-tabs type="border-card" @tab-click="handleTabClick" v-if="idCategory">
        <el-tab-pane label="待解密">
          <section class="fun-btn">
            <el-button class="btn" type="primary" size="mini" @click="handleDrawer('查询检索')">查询检索</el-button>
            <el-button class="btn" type="primary" size="mini" @click="handleDrawer('批量鉴定')">批量鉴定</el-button>

          </section>

          <section class="list-box">
            <el-table
              :data="tableData"
              border
              v-loading="tableLoading"
              @selection-change="handleSelectionChange"
              height="calc(100vh - 260px)"
              class="table">
              <el-table-column
                align="center"
                type="selection"
                fixed="left"
                width="60">
              </el-table-column>
              <el-table-column
                align="center"
                type="index"
                label="序号"
                width="60">
              </el-table-column>
              <el-table-column
                show-overflow-tooltip
                prop="dh"
                label="档号">
              </el-table-column>
              <el-table-column
                show-overflow-tooltip
                prop="tm"
                align="left"
                label="题名">
              </el-table-column>
              <el-table-column
                show-overflow-tooltip
                prop="wh"
                label="文号">
              </el-table-column>
            </el-table>
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page.pageNo"
              :page-sizes="[20, 40, 60, 80]"
              :page-size="page.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.total">
            </el-pagination>
          </section>
        </el-tab-pane>
        <el-tab-pane label="已解密" lazy>
          <section class="fun-btn">
            <el-button class="btn" type="primary" size="mini" @click="handleDrawer('查询检索')">查询检索</el-button>

            <el-button class="btn"
                       type="primary"
                       @click="handleInventory"
                       :loading="inventoryLoading"
                       size="mini">解密清册
            </el-button>
          </section>

          <section class="list-box">
            <el-table
              :data="tableData"
              border
              v-loading="tableLoading"
              @selection-change="handleSelectionChange"
              height="calc(100vh - 260px)"
              class="table">
              <el-table-column
                align="center"
                type="selection"
                fixed="left"
                width="60">
              </el-table-column>
              <el-table-column
                align="center"
                type="index"
                label="序号"
                width="60">
              </el-table-column>
              <el-table-column
                show-overflow-tooltip
                prop="dh"
                label="档号">
              </el-table-column>
              <el-table-column
                show-overflow-tooltip
                prop="tm"
                align="left"
                label="题名">
              </el-table-column>
              <el-table-column
                show-overflow-tooltip
                prop="wh"
                label="文号">
              </el-table-column>
            </el-table>
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page.pageNo"
              :page-sizes="[20, 40, 60, 80]"
              :page-size="page.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.total">
            </el-pagination>
          </section>
        </el-tab-pane>
      </el-tabs>

    </div>

    <el-drawer
      :title="setDrawer.title"
      :size="setDrawer.size"
      direction="rtl"
      :visible.sync="drawer"
    >
      <retrieval-search v-if="setDrawer.title === '查询检索'"
                        :loading="queryLoading"
                        :formItems="formItems"
                        @handleSenior="handleSenior"></retrieval-search>

      <batch-decrypt-appraisal v-if="setDrawer.title === '批量鉴定'"
                               :idCategory="idCategory"
                               :changesData="tableSelected"
                               @handleSuccess="handleSuccess"></batch-decrypt-appraisal>
    </el-drawer>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import RetrievalSearch from './component/drawer/retrievalSearch'
import { getCategoryTree } from '../../../api/category/category'
import { requestDecrypt, requestDecryptInventory, requestDecryptOver, requestQuery } from '../../../api/appraisal'
import BatchDecryptAppraisal from './component/drawer/batchDecryptAppraisal'

export default {
  name: 'Decrypt',
  components: {
    BatchDecryptAppraisal,
    RetrievalSearch
  },
  // 解密鉴定
  data () {
    return {
      treeLoading: false,
      propsTree: {
        label: 'name',
        value: 'id',
        children: 'children'
      },
      idCategory: '',
      inventoryLoading: false,
      tableLoading: false,
      queryLoading: false,
      drawer: false,
      setDrawer: {
        title: '',
        size: ''
      },
      page: {
        pageNo: 1,
        pageSize: 20,
        total: 0
      },
      treeData: [],
      tableData: [],
      tableSelected: [],
      changesData: [],
      formItems: [], // 查询检索的数据
      params: [],
      type: '待解密'
    }
  },
  mounted () {
    // 默认收起左侧导航栏
    this.setNavNarrow(true)
    this.getTreeDoorClass()
  },
  methods: {
    ...mapActions('profile/navNarrow', ['setNavNarrow']),
    getTreeDoorClass () {
      // 左侧获取门类
      this.treeLoading = true
      getCategoryTree('sysModel', true).then(res => {
        this.treeData = res.data.data
        this.treeLoading = false
      }).catch(() => {
        this.treeLoading = false
      })
    },
    handleNodeClick (data) {
      if (data.idCategory && this.idCategory !== data.idCategory) {
        this.idCategory = data.idCategory
        this.getDataList()
        this.getQueryData()
      }
    },
    getQueryData () {
      requestQuery({ idCategory: this.idCategory }).then(res => {
        this.formItems = res.data.data
      })
    },
    handleTabClick (val) {
      this.type = val.label
      this.getDataList()
    },
    getDataList () {
      const param = {
        pageNo: this.page.pageNo,
        pageSize: this.page.pageSize
      }
      if (this.params.length > 0) {
        param.params = this.params
      }

      this.tableLoading = true
      const request = this.type === '待解密' ? requestDecrypt(param, { idCategory: this.idCategory })
        : requestDecryptOver(param, { idCategory: this.idCategory })
      request.then(res => {
        this.tableData = res.data.data.records
        this.page.total = Number(res.data.data.total)
        this.tableLoading = false
      }).catch(() => {
        this.tableLoading = false
      })
    },
    handleSizeChange (val) {
      this.page.pageSize = val
      this.getDataList()
    },
    handleCurrentChange (val) {
      this.page.pageNo = val
      this.getDataList()
    },
    handleSelectionChange (selection) {
      // 勾选表格行
      this.tableSelected = selection
    },
    handleDrawer (type) {
      const arr = [{
        title: '查询检索',
        size: '650px'
      }, {
        title: '批量鉴定',
        size: '500px'
      }]
      if (type === '批量鉴定' && this.tableSelected.length < 1) {
        this.$message.warning('请选择一条数据操作！')
        return
      }

      arr.map(item => {
        if (item.title === type) {
          this.setDrawer = item
        }
      })
      this.drawer = true
    },
    async handleSenior (param) {
      // 检索
      this.queryLoading = true
      this.page.pageNo = 1
      this.page.pageSize = 20
      this.page.total = 0
      this.params = param

      await this.getDataList()

      this.drawer = false
      this.queryLoading = false
    },
    handleInventory () {
      // 解密清册
      this.inventoryLoading = true
      requestDecryptInventory({ idCategory: this.idCategory }).then(res => {
        this.$message.success('销毁清册操作成功！')
        this.download(res.data)
        this.inventoryLoading = false
      }).catch(() => {
        this.inventoryLoading = false
      })
    },
    download (data) {
      const blob = new Blob([data])
      const downloadElement = document.createElement('a')
      const href = window.URL.createObjectURL(blob) // 创建下载的链接
      downloadElement.href = href
      downloadElement.target = '_blank'
      downloadElement.download = '解密清册.xls' // 下载后文件名
      document.body.appendChild(downloadElement)
      downloadElement.click() // 点击下载
      document.body.removeChild(downloadElement) // 下载完成移除元素
      window.URL.revokeObjectURL(href) // 释放掉blob对象
    },
    handleSuccess () {
      this.drawer = false
      this.getDataList()
    }
  }
}
</script>

<style lang="scss" scoped>
  @import "../../../styles/mixin";

  .fun-btn {
    padding-left: 15px;
  }

  ::v-deep .el-tree {
    padding-top: 15px;
  }

  .box-content {
    padding: 0;

    ::v-deep .el-tab-pane {
      height: calc(100vh - 155px);
      overflow-y: auto;
    }
  }

</style>
